import { ReactElement, useEffect, useState } from 'react';
import Loadable from '@loadable/component';
import { createBrowserRouter, Navigate } from "react-router-dom";

const Loading = () => (<div>加载中...</div>);

const AsyncComponent = ({ Comp }) => {
    const [element, setElement] = useState<ReactElement>();
    useEffect(() => {
        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
        const Ele = Loadable(Comp);
        setElement(<Ele />);
    }, [Comp]);

    if (!element) {
        return <Loading />;
    }

    return element;
};

import './AppRouter.css';


const routeList = [
	{
		"path": "/",
		"children": [
			{
				"path": "login",
				"element": <AsyncComponent Comp={() => import('../page/login/Login')} />
			}
		]
	},
	{
		"path": "*",
		"element": <Navigate to="/login" replace />,
	}
];

const router = createBrowserRouter(routeList);

export default router;